<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        #con {
            position: absolute;
            left: 50%;
            margin-left: -250px;
            top: 50%;
            margin-top: -150px;
        }

        td {
            color: blue;
            font-size: 20px;
            text-align: center;
            cursor: pointer;
        }

        table {
            width: 500px;
        }

        #images {
            border-radius: 50%;
        }
    </style>
    <script>
        function getObj(event) {
            if (window.event) {
                event = window.event;
            }
            otarget = event.srcElement || event.target;
            return otarget;
        }

        function funclick() {
            alert(otarget.innerHTML);
            window.location.href = "https://image.baidu.com/search/index?tn=baiduimage&word=" + otarget.innerHTML;
        }

        function funmouseover() {
            obj = getObj();
            clearTimeout(T);
            cur = 1;
            var url = "images/" + obj.innerHTML + "/1.jpg"
            image.src = url;
        }

        var cur = 1;
        var T;

        function funmouseout() {
            cur++;
            if (cur > 7) {
                cur = 1
            }
            var url = "img/images/" + obj.innerHTML + "/" + cur + ".jpg";
            image.src = url;
            T = setTimeout(funmouseout, 1000);
        }

        var op = 1;
        var change = 0.1;

        function changOpacity() {
            if (op > 1) {
                change = -0.1;
            } else if (op < 0.5) {
                change = 0.1;
            }
            op = op + change;
            images.style.opacity = op;
            setTimeout(changeOpacity, 100);
        }
    </script>
</head>
<body onload="changOpacity()">
<div id="con">
    <table>
        <tr>
            <td rowspan="5">
                <img src="img/images/tu.jpg" id="images" width="200px">
            </td>
            <td colspan="2">
                <input type="text" id="num"/>
                <button>搜索</button>
            </td>
        </tr>
        <tr>
            <td class="person">兵马俑</td>
            <td class="person">川菜</td>
        </tr>
        <tr>
            <td class="person">客家土楼</td>
            <td class="person">民族乐器</td>
        </tr>
        <tr>
            <td class="person">青铜重器</td>
            <td class="person">新疆风情</td>
        </tr>
        <tr>
            <td class="person">粤菜</td>
            <td class="person">中国国宝</td>
        </tr>
    </table>
</div>
<script>
    var persons = document.getElementsByClassName("person");
    for (var i = 0; i < persons.length; i++) {
        persons[i].addEventListener("click", funclick, false);
        persons[i].addEventListener("mouseover", funmouseover, false);
        persons[i].addEventListener("mouseout", funmouseout, false);
    }
    image = document.getElementById("images");
    document.getElementsByTagName("button")[0].onclick = function () {
        var num = document.getOverrideStyle("num").value;
        if (num != "") {
            window.location.href = "https://image.baidu.com/search/index?tn=baiduimage&word=" + nums;
        }
    }
</script>
</body>
</html>
